<UserControl x:Name="This"
             x:Class="Kaxaml.Plugins.ColorPicker.ColorPickerPlugin"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:l="clr-namespace:Kaxaml.Plugins.ColorPicker"
             xmlns:p="clr-namespace:KaxamlPlugins;assembly=KaxamlPlugins"
             xmlns:c="clr-namespace:Kaxaml.Plugins.Controls;assembly=KaxamlPlugins">

  <StackPanel SnapsToDevicePixels="True">
    <StackPanel.Resources>
      <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
          <ResourceDictionary Source="/Shazzam;component/Resources/PluginTheme.xaml" />
        </ResourceDictionary.MergedDictionaries>

        <p:RoundConverter x:Key="RoundConverter" />

        <DrawingBrush x:Key="AlphaBrush"
                      Viewbox="0,0,8,8"
                      ViewboxUnits="Absolute"
                      TileMode="Tile"
                      ViewportUnits="Absolute"
                      Viewport="0,0,8,8">
          <DrawingBrush.Drawing>
            <DrawingGroup>
              <GeometryDrawing Brush="#FFFFFFFF">
                <GeometryDrawing.Geometry>
                  <RectangleGeometry RadiusX="0"
                                     RadiusY="0"
                                     Rect="0,0,4,4" />
                </GeometryDrawing.Geometry>
              </GeometryDrawing>
              <DrawingGroup>
                <DrawingGroup.Transform>
                  <MatrixTransform Matrix="1,0,0,1,4,0" />
                </DrawingGroup.Transform>
                <GeometryDrawing Brush="#FFAAAAAA">
                  <GeometryDrawing.Geometry>
                    <RectangleGeometry RadiusX="0"
                                       RadiusY="0"
                                       Rect="0,0,4,4" />
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingGroup>
              <DrawingGroup>
                <DrawingGroup.Transform>
                  <MatrixTransform Matrix="1,0,0,1,0,4" />
                </DrawingGroup.Transform>
                <GeometryDrawing Brush="#FFAAAAAA">
                  <GeometryDrawing.Geometry>
                    <RectangleGeometry RadiusX="0"
                                       RadiusY="0"
                                       Rect="0,0,4,4" />
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingGroup>
              <DrawingGroup>
                <DrawingGroup.Transform>
                  <MatrixTransform Matrix="1,0,0,1,4,4" />
                </DrawingGroup.Transform>
                <GeometryDrawing Brush="#FFFFFFFF">
                  <GeometryDrawing.Geometry>
                    <RectangleGeometry RadiusX="0"
                                       RadiusY="0"
                                       Rect="0,0,4,4" />
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingGroup>
            </DrawingGroup>
          </DrawingBrush.Drawing>
        </DrawingBrush>

        <SolidColorBrush x:Key="Foreground"
                         Color="#DDD" />
        <SolidColorBrush x:Key="SunkenBackground"
                         Color="#444444" />
        <SolidColorBrush x:Key="Highlight"
                         Color="#707070" />
        <SolidColorBrush x:Key="RaisedHighlight"
                         Color="#787878" />
        <SolidColorBrush x:Key="Shadow"
                         Color="#202020" />
        <SolidColorBrush x:Key="RaisedShadow"
                         Color="#101010" />
        <SolidColorBrush x:Key="DisabledForeground"
                         Color="#777" />
        <SolidColorBrush x:Key="DisabledSunkenBackground"
                         Color="#404040" />
        <SolidColorBrush x:Key="DisabledHighlight"
                         Color="#505050" />
        <SolidColorBrush x:Key="DisabledShadow"
                         Color="#303030" />
        <LinearGradientBrush x:Key="Normal"
                             StartPoint="0,0"
                             EndPoint="0,1">
          <GradientStop Offset="0.0"
                        Color="#585858" />
          <GradientStop Offset="1.2"
                        Color="#282828" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="Down"
                             StartPoint="0,0"
                             EndPoint="0,1">
          <GradientStop Offset="0.0"
                        Color="#505050" />
          <GradientStop Offset="1.2"
                        Color="#303030" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="MouseOver"
                             StartPoint="0,0"
                             EndPoint="0,1">
          <GradientStop Offset="0.0"
                        Color="#686868" />
          <GradientStop Offset="1.2"
                        Color="#282828" />
        </LinearGradientBrush>
        <TranslateTransform Y="-1"
                            x:Key="Up1" />
        <TranslateTransform Y="1"
                            x:Key="Down1" />

        <!--
  *****************************************************************
  Arrow Buttons
  *****************************************************************
  -->

        <Style x:Key="LeftArrow"
               TargetType="{x:Type Button}">
          <Setter Property="SnapsToDevicePixels"
                  Value="true" />
          <Setter Property="OverridesDefaultStyle"
                  Value="true" />
          <Setter Property="FocusVisualStyle"
                  Value="{x:Null}" />
          <Setter Property="Foreground"
                  Value="{StaticResource Foreground}" />
          <Setter Property="FontSize"
                  Value="7.5pt" />

          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type Button}">
                <Grid Width="20"
                      Height="15">
                  <Path x:Name="Hi"
                        Fill="{StaticResource RaisedHighlight}"
                        RenderTransform="{StaticResource Up1}"
                        Stretch="Fill"
                        Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                  <Path x:Name="Sh"
                        Fill="{StaticResource RaisedShadow}"
                        RenderTransform="{StaticResource Down1}"
                        Stretch="Fill"
                        Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                  <Path x:Name="No"
                        Fill="{StaticResource Normal}"
                        Stretch="Fill"
                        Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                  <Path x:Name="Mo"
                        Fill="{StaticResource MouseOver}"
                        Opacity="0"
                        Margin="0,1,0,0"
                        Stretch="Fill"
                        Data="F1 M8.000001,-24.000002 L8.000001,0.50000066 112,0.50000066 C116.14214,0.5 119.5,3.8578644 119.5,7.999999 L119.5,104 C119.5,108.14214 116.14214,111.5 112,111.5 L8.000001,111.5 8.000001,136 -72,56 8.000001,-24.000002 z" />
                </Grid>
                <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver"
                           Value="True">
                    <Trigger.EnterActions>
                      <BeginStoryboard>
                        <Storyboard>
                          <ColorAnimation Storyboard.TargetName="Hi"
                                          Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                                          To="#989898"
                                          Duration="0:0:0.1" />
                          <DoubleAnimation Storyboard.TargetName="Mo"
                                           Storyboard.TargetProperty="Opacity"
                                           To="1"
                                           Duration="0:0:0.1" />
                        </Storyboard>
                      </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                      <BeginStoryboard>
                        <Storyboard>
                          <ColorAnimation Storyboard.TargetName="Hi"
                                          Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                                          Duration="0:0:0.3" />
                          <DoubleAnimation  Storyboard.TargetName="Mo"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0:0:0.3" />
                        </Storyboard>
                      </BeginStoryboard>
                    </Trigger.ExitActions>
                  </Trigger>
                  <Trigger Property="IsPressed"
                           Value="True">
                    <Setter TargetName="Mo"
                            Property="Opacity"
                            Value="1" />
                    <Setter TargetName="Mo"
                            Property="Fill"
                            Value="{StaticResource Down}" />
                    <Setter TargetName="Hi"
                            Property="Fill"
                            Value="#101010" />
                    <Setter TargetName="Sh"
                            Property="Fill"
                            Value="#707070" />
                  </Trigger>
                  <Trigger Property="IsEnabled"
                           Value="False">
                    <Setter TargetName="Mo"
                            Property="Opacity"
                            Value="1" />
                    <Setter TargetName="No"
                            Property="Fill"
                            Value="#404040" />
                    <Setter TargetName="Mo"
                            Property="Fill"
                            Value="#0000" />
                    <Setter TargetName="Hi"
                            Property="Fill"
                            Value="#0000" />
                    <Setter TargetName="Sh"
                            Property="Fill"
                            Value="#0000" />
                  </Trigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>

        <Style x:Key="RightArrow"
               TargetType="{x:Type Button}">
          <Setter Property="SnapsToDevicePixels"
                  Value="true" />
          <Setter Property="OverridesDefaultStyle"
                  Value="true" />
          <Setter Property="FocusVisualStyle"
                  Value="{x:Null}" />
          <Setter Property="Foreground"
                  Value="{StaticResource Foreground}" />
          <Setter Property="FontSize"
                  Value="7.5pt" />

          <Setter Property="Template">
            <Setter.Value>

              <ControlTemplate TargetType="{x:Type Button}">
                <Grid Width="20"
                      Height="15">
                  <Path x:Name="Hi"
                        Fill="{StaticResource RaisedHighlight}"
                        RenderTransform="{StaticResource Up1}"
                        Stretch="Fill"
                        Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                  <Path x:Name="Sh"
                        Fill="{StaticResource RaisedShadow}"
                        RenderTransform="{StaticResource Down1}"
                        Stretch="Fill"
                        Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                  <Path x:Name="No"
                        Fill="{StaticResource Normal}"
                        Stretch="Fill"
                        Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                  <Path x:Name="Mo"
                        Fill="{StaticResource MouseOver}"
                        Opacity="0"
                        Margin="0,1,0,0"
                        Stretch="Fill"
                        Data="F1M10.7238903045654,-6.25L20.75,3.25 10.7238903045654,12.75 10.7238903045654,9.84062480926514 -2.31005191802979,9.84062480926514C-2.82917165756226,9.84062480926514,-3.25,9.44187831878662,-3.25,8.94999980926514L-3.25,-2.44999980926514C-3.25,-2.94187927246094,-2.82917165756226,-3.34062504768372,-2.31005191802979,-3.34062480926514L10.7238903045654,-3.34062480926514 10.7238903045654,-6.25z" />
                </Grid>
                <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver"
                           Value="True">
                    <Trigger.EnterActions>
                      <BeginStoryboard>
                        <Storyboard>
                          <ColorAnimation Storyboard.TargetName="Hi"
                                          Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                                          To="#989898"
                                          Duration="0:0:0.1" />
                          <DoubleAnimation Storyboard.TargetName="Mo"
                                           Storyboard.TargetProperty="Opacity"
                                           To="1"
                                           Duration="0:0:0.1" />
                        </Storyboard>
                      </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                      <BeginStoryboard>
                        <Storyboard>
                          <ColorAnimation Storyboard.TargetName="Hi"
                                          Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
                                          Duration="0:0:0.3" />
                          <DoubleAnimation  Storyboard.TargetName="Mo"
                                            Storyboard.TargetProperty="Opacity"
                                            Duration="0:0:0.3" />
                        </Storyboard>
                      </BeginStoryboard>
                    </Trigger.ExitActions>
                  </Trigger>
                  <Trigger Property="IsPressed"
                           Value="True">
                    <Setter TargetName="Mo"
                            Property="Opacity"
                            Value="1" />
                    <Setter TargetName="Mo"
                            Property="Fill"
                            Value="{StaticResource Down}" />
                    <Setter TargetName="Hi"
                            Property="Fill"
                            Value="#101010" />
                    <Setter TargetName="Sh"
                            Property="Fill"
                            Value="#707070" />
                  </Trigger>
                  <Trigger Property="IsEnabled"
                           Value="False">
                    <Setter TargetName="Mo"
                            Property="Opacity"
                            Value="1" />
                    <Setter TargetName="No"
                            Property="Fill"
                            Value="#404040" />
                    <Setter TargetName="Mo"
                            Property="Fill"
                            Value="#0000" />
                    <Setter TargetName="Hi"
                            Property="Fill"
                            Value="#0000" />
                    <Setter TargetName="Sh"
                            Property="Fill"
                            Value="#0000" />
                  </Trigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>

            </Setter.Value>
          </Setter>
        </Style>
      </ResourceDictionary>
    </StackPanel.Resources>

    <StackPanel Margin="1">

      <c:ColorPicker x:Name="C" />

      <!-- controls grid -->

      <Grid Margin="5,0,5,5">

        <Grid.ColumnDefinitions>
          <ColumnDefinition x:Name="col0"
                            Width="Auto" />
          <ColumnDefinition x:Name="col1"
                            Width="10" />
          <ColumnDefinition x:Name="col2"
                            Width="0.7*" />
          <ColumnDefinition x:Name="col3"
                            Width="0.7*" />
          <ColumnDefinition x:Name="col4"
                            Width="10" />
          <ColumnDefinition x:Name="col5"
                            Width="1*" />
          <ColumnDefinition x:Name="col6"
                            Width="5" />
          <ColumnDefinition x:Name="col7"
                            Width="1*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
          <RowDefinition x:Name="row0"
                         Height="17" />
          <RowDefinition x:Name="row1"
                         Height="3" />
          <RowDefinition x:Name="row2"
                         Height="17" />
          <RowDefinition x:Name="row3"
                         Height="3" />
          <RowDefinition x:Name="row4"
                         Height="17" />
          <RowDefinition x:Name="row5"
                         Height="3" />
          <RowDefinition x:Name="row6"
                         Height="17" />
        </Grid.RowDefinitions>

        <!-- Sample Swatch -->
        <Border Grid.Column="2"
                Grid.ColumnSpan="2"
                Grid.RowSpan="5"
                Margin="1"
                Background="{StaticResource AlphaBrush}" />
        <Border Grid.Column="2"
                Grid.RowSpan="5"
                Grid.ColumnSpan="2">
          <Border.Background>
            <SolidColorBrush Color="{Binding ElementName=C, Path=Color}" />
          </Border.Background>
        </Border>
        <c:TextDragger Grid.Column="2"
                       Grid.RowSpan="5"
                       Grid.ColumnSpan="2"
                       Cursor="Hand"
                       Text="{Binding ElementName=C, Path=Color}" />
        <TextBox Grid.Column="2"
                 Grid.Row="6"
                 Grid.ColumnSpan="2"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="0,0,0,1"
                 Text="{Binding ElementName=C, Path=Color, UpdateSourceTrigger=PropertyChanged}" />

        <!-- RGB -->
        <TextBlock Grid.Row="0"
                   Grid.Column="5"
                   Margin="0,2,0,0">R</TextBlock>
        <TextBlock Grid.Row="2"
                   Grid.Column="5"
                   Margin="0,2,0,0">G</TextBlock>
        <TextBlock Grid.Row="4"
                   Grid.Column="5"
                   Margin="0,2,0,0">B</TextBlock>
        <TextBlock Grid.Row="6"
                   Grid.Column="5"
                   Margin="0,2,0,0">A</TextBlock>
        <TextBox Grid.Row="0"
                 Grid.Column="5"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=R, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Grid.Row="2"
                 Grid.Column="5"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=G, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Grid.Row="4"
                 Grid.Column="5"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=B, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Grid.Row="6"
                 Grid.Column="5"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=A, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

        <!-- HSB -->
        <TextBlock Grid.Row="0"
                   Grid.Column="7"
                   Margin="0,2,0,0">H</TextBlock>
        <TextBlock Grid.Row="2"
                   Grid.Column="7"
                   Margin="0,2,0,0">S</TextBlock>
        <TextBlock Grid.Row="4"
                   Grid.Column="7"
                   Margin="0,2,0,0">B</TextBlock>
        <TextBlock Grid.Row="6"
                   Grid.Column="7"
                   Margin="0,2,0,0">A</TextBlock>
        <TextBox Grid.Row="0"
                 Grid.Column="7"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=Hue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />
        <TextBox Grid.Row="2"
                 Grid.Column="7"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=Saturation, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />
        <TextBox Grid.Row="4"
                 Grid.Column="7"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=Brightness, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />
        <TextBox Grid.Row="6"
                 Grid.Column="7"
                 MinWidth="0"
                 MinHeight="0"
                 Height="16"
                 Margin="10,0,0,1"
                 Text="{Binding ElementName=C, Path=Alpha, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource RoundConverter}}" />

        <!-- Buttons -->

        <StackPanel Grid.Column="0"
                    Grid.Row="0"
                    Grid.RowSpan="100">

          <ToggleButton ToolTip="Synchronize with selected text"
                        MinWidth="0"
                        MinHeight="0"
                        Height="23"
                        Width="23"
                        Margin="0,0,0,4"
                        HorizontalContentAlignment="Left"
                        VerticalContentAlignment="Top"
                        x:Name="SyncButton"
                        IsEnabled="False"
                        Checked="SyncButtonChecked"
                        Unchecked="SyncButtonUnChecked">
            <ToggleButton.Triggers>
              <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Link"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"
                                     Duration="0:0:0.2" />
                    <DoubleAnimation Storyboard.TargetName="Link_Break"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0"
                                     Duration="0:0:0.2" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
              <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Link"
                                     Storyboard.TargetProperty="Opacity"
                                     To="0"
                                     Duration="0:0:0.2" />
                    <DoubleAnimation Storyboard.TargetName="Link_Break"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"
                                     Duration="0:0:0.2" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </ToggleButton.Triggers>

            <Grid>
              <Image x:Name="Link_Break"
                     Width="14"
                     Height="14"
                     Margin="5,2,0,0"
                     Source='/Shazzam;component/Images/disconnect.png' />
              <Image x:Name="Link"
                     Opacity="0"
                     Width="14"
                     Height="14"
                     Margin="5,2,0,0"
                     Source='/Shazzam;component/Images/connect.png' />
            </Grid>
          </ToggleButton>

          <Button ToolTip="Copy to the clipboard"
                  Click="CopyColor"
                  MinWidth="0"
                  MinHeight="0"
                  Height="23"
                  Width="23"
                  Margin="0,0,0,4"
                  HorizontalContentAlignment="Left"
                  VerticalContentAlignment="Top">
            <Image Source='/Shazzam;component/Images/page_copy.png'
                   Width="12"
                   Height="12"
                   Margin="6,5,0,0">
            </Image>
          </Button>

          <Button ToolTip="Save to saved colors palette"
                  Click="SaveColor"
                  MinWidth="0"
                  MinHeight="0"
                  Height="23"
                  Width="23"
                  Margin="0,0,0,0"
                  HorizontalContentAlignment="Left"
                  VerticalContentAlignment="Top">
            <Image Source='/Shazzam;component/Images/disk.png'
                   Width="12"
                   Height="12"
                   Margin="6,5,0,0">
            </Image>
          </Button>

        </StackPanel>

        <StackPanel Visibility="Collapsed"
                    Grid.Row="6"
                    Grid.Column="0"
                    Margin="0,0,0,0"
                    Orientation="Horizontal"
                    HorizontalAlignment="Center">

          <Button Style="{StaticResource LeftArrow}"
                  Margin="0,0,4,0" />
          <Button Style="{StaticResource RightArrow}"
                  Margin="4,0,0,0" />

        </StackPanel>

      </Grid>

    </StackPanel>

    <ListBox Margin="0,10,0,0"
             x:Name="SavedColors"
             Style="{x:Null}"
             FocusVisualStyle="{x:Null}"
             ItemsSource="{Binding ElementName=This, Path=Colors}">
      <ListBox.Resources>

        <ContextMenu x:Key="ColorContextMenu">
          <MenuItem Header="Remove"
                    Click="RemoveColor" />
          <MenuItem Header="Remove All"
                    Click="RemoveAllColors" />
        </ContextMenu>

        <DataTemplate DataType="{x:Type Color}">
          <Grid SnapsToDevicePixels="True"
                Width="16"
                Height="16"
                Margin="0,0,4,4"
                Background="{StaticResource AlphaBrush}">
            <Rectangle Fill="{StaticResource AlphaBrush}" />
            <Border BorderBrush="Black"
                    BorderThickness="1">
              <Border.Background>
                <SolidColorBrush Color="{Binding}" />
              </Border.Background>
            </Border>
            <c:TextDragger Cursor="Hand"
                           MouseDown="SwatchMouseDown"
                           Text="{Binding .}" />
          </Grid>
        </DataTemplate>

        <Style TargetType="{x:Type ListBoxItem}">
          <Setter Property="FocusVisualStyle"
                  Value="{x:Null}" />
          <Setter Property="ContextMenu"
                  Value="{DynamicResource ColorContextMenu}">
          </Setter>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <ContentPresenter />
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ListBox.Resources>
      <ListBox.Template>
        <ControlTemplate TargetType="{x:Type ListBox}">
          <WrapPanel Width="240"
                     IsItemsHost="true" />
        </ControlTemplate>
      </ListBox.Template>
    </ListBox>

  </StackPanel>
</UserControl>
